<template>
  <div class="">
    **【自己封装方法, 数据来源于JSON, 参考了插件 `element-china-area-data`】**
    <div class="">【A】多级多下拉控件（省市区镇）</div>
    <el-row :gutter="5">
      <!--  省/直辖市  -->
      <el-col :span="6">
        <!--  省/直辖市  -->
        <el-select
          v-model="province"
          filterable
          clearable
          placeholder="请选择省/直辖市"
          style="width: 100%;"
          @change="changeProvinceVal"
        >
          <el-option
            v-for="item in list1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <!--  市/直辖区  -->
      <el-col :span="6">
        <!--  市/直辖区  -->
        <el-select
          v-model="city"
          filterable
          clearable
          placeholder="请选择市/直辖区"
          style="width: 100%;"
          @change="changeCityVal"
        >
          <el-option
            v-for="item in filterCity"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <!--  区  -->
      <el-col :span="6">
        <!--  区  -->
        <el-select
          v-model="county"
          filterable
          clearable
          placeholder="请选择区"
          style="width: 100%;"
          @change="changeCountyVal"
        >
          <el-option
            v-for="item in filterCounty"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <!--  镇  -->
      <el-col :span="6">
        <!--  镇  -->
        <el-select
          v-model="town"
          filterable
          clearable
          placeholder="请选择镇"
          style="width: 100%;"
          @change="changeTownVal"
        >
          <el-option
            v-for="item in filterTown"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
    </el-row>
    <div style="color: #cdcdcd" class="">&nbsp;&nbsp;&nbsp;&nbsp;你选择的值为: {{ oneSelectVal }}</div>

    <div class="">【B】多级单下拉控件（省市区）</div>
    <el-row :gutter="0">
      <el-col :span="8">
        <el-cascader
          v-model="selectVal"
          placeholder="试试搜索：相城区"
          :options="list2"
          style="width: 100%;"
          filterable
          clearable
          @change="changeSelectVal"
        >
          <template slot-scope="{ node, data }">
            <span>{{ data.label }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </el-col>
    </el-row>
    <div style="color: #cdcdcd" class="">&nbsp;&nbsp;&nbsp;&nbsp;你选择的值为: {{ selectVal }}</div>
    **【使用 `v-region` 插件】**
    <div class="">【A】四级下拉控件（省市区镇）</div>
    <region-selects
      v-model="selectedVRegion"
      :town="true"
      @change="regionChange"
    />
    <div class="">【B】三级下拉控件（省市区镇）</div>
    <region-columns
      v-model="selectedVRegionColumns"
      :town="false"
      @change="regionChange"
    />
  </div>
</template>

<script>
import { provinceCityCountyTownData, provinceCityCountyData, codeToText } from '@utils/china-area'
import { RegionSelects, RegionColumns, RegionCityPicker, RegionColumnsCore } from 'v-region'
export default {
  name: 'index',
  // eslint-disable-next-line vue/no-unused-components
  components: { RegionSelects, RegionColumns, RegionCityPicker, RegionColumnsCore },
  data() {
    return {
      province: '',
      city: '',
      county: '',
      town: '',
      selectVal: '',
      list1: provinceCityCountyTownData,
      list2: provinceCityCountyData,
      selectedVRegion: {
        province: '',
        city: '',
        area: '',
        town: ''
      },
      selectedVRegionColumns: {
        province: '',
        city: '',
        area: '',
        town: ''
      }
    }
  },
  computed: {
    filterCity() {
      if (!this.province) return []
      return this.list1.filter(im => im.value === this.province)[0]['children']
    },
    filterCounty() {
      if (!this.city) return []
      return this.filterCity.filter(im => im.value === this.city)[0]['children']
    },
    filterTown() {
      if (!this.county) return []
      return this.filterCounty.filter(im => im.value === this.county)[0]['children']
    },
    oneSelectVal() {
      const str = []
      if (this.province) {
        str.push(this.province)
      }
      if (this.city) {
        str.push(this.city)
      }
      if (this.county) {
        str.push(this.county)
      }
      if (this.town) {
        str.push(this.town)
      }
      return codeToText(str)
    }
  },
  methods: {
    changeProvinceVal(province) {
      this.city = ''
      this.county = ''
      this.town = ''
    },
    changeCityVal(city) {
      this.county = ''
      this.town = ''
    },
    changeCountyVal(county) {
      this.town = ''
    },
    changeTownVal(town) {
      // console.log(vm)
      this.$emit('input', this.oneSelectVal)
    },
    changeSelectVal(vm) {
      this.selectVal = codeToText(this.selectVal)
      this.$emit('input', this.selectVal)
    },
    // v-region
    regionChange(vm) {
      // console.log('v-regin 已选择: ', vm)
    }
  }
}
</script>

<style scoped>

</style>
